<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    			xmlns:ui="http://java.sun.com/jsf/facelets"
    			xmlns:f="http://java.sun.com/jsf/core"
    			xmlns:h="http://java.sun.com/jsf/html"
    			xmlns:p="http://primefaces.org/ui"
    			xmlns:ec="http://www.b2cexpress.com.br/ecommerce"
    			xmlns:s="http://www.suricattus.com.br/jsf/ui"
				xmlns:sf="http://www.suricattus.com.br/jsf/fn">
	<div class="#{class}">
		<legend><h:outputText value="#{labels[sf:getDefaultValue(label, 'cadastro.categoria.meus.dados')]}" /></legend>
		<ec:field id="tipoCliente" fieldId="tipoClienteField" label="#{labels['label.tipo.pessoa']}" required="false">
			<h:selectOneRadio id="tipoClienteField" value="#{cliente.tipo}" label="#{labels['label.tipo.pessoa']}">
				<f:selectItem itemLabel="#{labels['label.pessoa.fisica']}" itemValue="FISICA" />
				<f:selectItem itemLabel="#{labels['label.pessoa.juridica']}" itemValue="JURIDICA" />
				<p:ajax event="change" update="@this dadosPessoa" process="@this" />
			</h:selectOneRadio>
		</ec:field>
		
		<h:panelGroup id="dadosPessoa">
			<h:panelGroup rendered="#{cliente.tipo.id eq 'F'}">
				<ec:field id="nomeCliente" fieldId="nomeClienteField" label="#{labels['label.nome']}" required="true" width="100%">
					<p:inputText id="nomeClienteField" value="#{cliente.nome}" label="#{labels['label.nome']}" 
							required="true" maxlength="100" styleClass="input-block-level" style="max-width:650px" />
				</ec:field>
				<ec:field id="cpfCliente" fieldId="cpfClienteField" label="#{labels['label.cpf']}" required="true">
					<p:inputMask id="cpfClienteField" mask="mask:'999.999.999-99'" value="#{cliente.cpfCnpj}" required="true" style="width:105px" >
						<s:cpf />
					</p:inputMask> 
				</ec:field>
				<ec:field id="dataNascimentoCliente" fieldId="dataNascimentoClienteField" label="#{labels['label.data.nascimento']}" required="true">
					<p:inputMask id="dataNascimentoClienteField" mask="mask:'99/99/9999'" value="#{cliente.dataNascimento}" 
							required="true" label="#{labels['label.data.nascimento']}" style="width: 75px;"
							validator="sqlServerDateValidator">
						<f:convertDateTime pattern="dd/MM/yyyy" timeZone="America/Sao_Paulo" />
					</p:inputMask> 
				</ec:field>
				<ec:field id="rg" fieldId="rgField" label="#{labels['label.rg']}">
					<p:inputMask id="rgField" value="#{cliente.rg}" label="#{labels['label.rg']}" maxlength="20" style="width: 150px;" mask="mask:'99999999999999999999'" />
				</ec:field>
				<ec:field id="orgaoExpedidor" fieldId="orgaoExpedidorClienteField" label="#{labels['label.orgao.expedidor']}" width="100%" >
					<p:inputText id="orgaoExpedidorClienteField" value="#{cliente.orgaoExpedidor}" label="#{labels['label.orgao.expedidor']}" 
							maxlength="20" style="width: 150px;" />
				</ec:field>
				<ec:field id="passaporte" fieldId="passaporteField" label="#{labels['label.passaporte']}" >
					<p:inputText id="passaporteField" value="#{cliente.passaporte}" label="#{labels['label.passaporte']}" 
							maxlength="30" style="width: 215px;" />
				</ec:field>
			</h:panelGroup>
			<h:panelGroup rendered="#{cliente.tipo.id eq 'J'}">
				<ec:field id="razaoSocialCliente" fieldId="razaoSocialClienteField" label="#{labels['label.razao.social']}" required="true" width="100%">
					<p:inputText id="razaoSocialClienteField" value="#{cliente.nome}" label="#{labels['label.razao.social']}" 
							required="true" maxlength="100" styleClass="input-block-level" style="max-width:650px"  />
				</ec:field>
				<ec:field id="contatoCliente" fieldId="contatoClienteField" label="#{labels['label.contato']}" required="true" width="100%">
					<p:inputText id="contatoClienteField" value="#{cliente.contato}" label="#{labels['label.contato']}" 
							required="true" maxlength="100" styleClass="input-block-level" style="max-width:650px" />
				</ec:field>
				<ec:field id="cnpjCliente" fieldId="cnpjClienteField" label="#{labels['label.cnpj']}" required="true">
					<p:inputMask id="cnpjClienteField" mask="mask:'99.999.999/9999-99'" value="#{cliente.cpfCnpj}" required="true" style="width: 135px;" > 
						<s:cnpj />
					</p:inputMask>
				</ec:field>
				<ec:field id="inscricaoEstadual" fieldId="inscricaoEstadualField" label="#{labels['label.inscricao.estadual']}" required="true">
					<p:inputMask id="inscricaoEstadualField" mask="mask:'999999999999999'" value="#{cliente.rg}" required="true" 
							style="width: 135px;" />
				</ec:field>
			</h:panelGroup>
		</h:panelGroup>
			
		<ec:field id="emailCliente" fieldId="j_username" label="#{labels['label.email']}" required="true" width="100%">
			<p:inputText id="j_username" value="#{cliente.email}" label="#{labels['label.email']}" required="true" maxlength="80" 
					styleClass="input-block-level" style="max-width:525px" >
				<s:email />
			</p:inputText>
		</ec:field>
		<h:panelGroup rendered="#{senha}">
				<ec:field id="senhaCliente" fieldId="senhaClienteField" label="#{labels['label.senha']}" required="true">
					<p:password id="senhaClienteField" value="#{cliente.senha}" label="#{labels['label.senha']}" required="true"
							feedback="true" maxlength="15"
	                		promptLabel="#{labels['label.forca.senha']}" weakLabel="#{labels['label.forca.senha.fraca']}"  
	                		goodLabel="#{labels['label.forca.senha.boa']}" strongLabel="#{labels['label.forca.senha.forte']}"
	                		style="width: 70px;">
	                	<f:validateLength minimum="6" />
	                </p:password>
				</ec:field>
				<ec:field id="confirmacaoSenhaCliente" fieldId="confirmacao" label="#{labels['label.confirmacao.senha']}" required="true">
					<p:password value="#{cliente.novaSenha}" id="confirmacao" label="#{labels['label.confirmacao.senha']}" required="true" maxlength="15" 
						validatorMessage="#{messages['msgN009']}" style="width: 70px;"/>
				</ec:field>
		</h:panelGroup>
		<ec:field id="telefoneCliente" fieldId="telefoneClienteField" label="#{labels['label.telefone']}" required="true">
			<p:inputMask id="telefoneClienteField" mask="mask:'(99)9999-99999'" value="#{cliente.telefone}" required="true" 
					label="#{labels['label.telefone']}" converter="telefoneConverter" style="width: 110px;">
				<f:validateLength minimum="10" />
			</p:inputMask>
		</ec:field>
		<ec:field id="celularCliente" fieldId="celularClienteField" label="#{labels['label.celular']}" required="true">
			<p:inputMask id="celularClienteField" mask="mask:'(99)9999-99999'" value="#{cliente.celular}" required="true" 
					label="#{labels['label.celular']}" converter="telefoneConverter" style="width: 110px;">
				<f:validateLength minimum="10" />
			</p:inputMask>
		</ec:field>
		<ec:field id="novidadesCliente" fieldId="novidadesClienteField" label="#{labels['label.receber.novidades']}" required="true">
			<h:selectOneRadio id="novidadesClienteField" value="#{cliente.news}" label="#{labels['label.receber.novidades']}">
				<f:selectItem itemLabel="#{labels['label.sim']}" itemValue="SIM" />
				<f:selectItem itemLabel="#{labels['label.nao']}" itemValue="NAO" />
			</h:selectOneRadio>
		</ec:field>
	</div>
	
	<div class="#{class}">
		<legend>#{labels['cadastro.categoria.endereco']}</legend>
		<ec:field id="ruaClienteCadastro" fieldId="ruaClienteCadastroField" label="#{labels['label.rua']}" required="true" width="100%">
			<p:inputText id="ruaClienteCadastroField" value="#{endereco.rua}" label="#{labels['label.rua']}" required="true" maxlength="100"
					styleClass="input-block-level" style="max-width:650px" />
		</ec:field>
		<ec:field id="complementoClienteCadastro" fieldId="complementoClienteCadastroField" label="#{labels['label.complemento']}" required="true" width="100%">
			<p:inputText id="complementoClienteCadastroField" value="#{endereco.complemento}" label="#{labels['label.complemento']}" required="true" maxlength="100"
					styleClass="input-block-level" style="max-width:650px" />
		</ec:field>
		<ec:field id="bairroClienteCadastro" fieldId="bairroClienteCadastroField" label="#{labels['label.bairro']}" required="true" width="100%">
			<p:inputText id="bairroClienteCadastroField" value="#{endereco.bairro}" label="#{labels['label.bairro']}" required="true" maxlength="100"
					styleClass="input-block-level" style="max-width:450px" />
		</ec:field>
		<ec:field id="cidadeClienteCadastro" fieldId="cidadeClienteCadastroField" label="#{labels['label.cidade']}" required="true" width="100%">
			<p:inputText id="cidadeClienteCadastroField" value="#{endereco.cidade}" label="#{labels['label.cidade']}" required="true" maxlength="200"
					styleClass="input-block-level" style="max-width:550px" />
		</ec:field>
		<ec:field id="ufClienteCadastro" fieldId="ufClienteCadastroField" label="#{labels['label.uf']}" required="true">
			<h:selectOneMenu id="ufClienteCadastroField" value="#{endereco.uf}" label="#{labels['label.uf']}" required="true" style="width: 60px;">
				<f:selectItems value="#{utilFactory.listaUf}" var="_uf" itemLabel="#{_uf}" itemValue="#{_uf}"/>
			</h:selectOneMenu>
		</ec:field>
		<ec:field id="cepClienteCadastro" fieldId="cepClienteCadastroField" label="#{labels['label.cep']}" required="true">
			<p:inputMask id="cepClienteCadastroField" mask="mask:'99999-999'" value="#{endereco.cep}" required="true" label="#{labels['label.cep']}" 
					converter="cepConverter" style="width: 75px;">
				<f:validateLength minimum="8" />
			</p:inputMask>
		</ec:field>
		<ec:field id="referenciaClienteCadastro" fieldId="referenciaClienteCadastroField" label="#{labels['label.ponto.referencia']}" required="false"  width="100%">
			<p:inputText id="referenciaClienteCadastroField" value="#{endereco.pontoReferencia}" label="#{labels['label.ponto.referencia']}" maxlength="100"
					styleClass="input-block-level" style="max-width:550px"  />
		</ec:field>
	</div>

	<ui:insert />
	
</ui:composition>
